<template>
        <div class="header-warp">
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i class="el-icon-menu"></i>
        </div>
        <div class="logo">后台管理系统</div>
        <div class="header-behind">
          <p>欢迎你！路飞酱</p>
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    <!-- 设置<i class="el-icon-arrow-down el-icon--right"></i> -->
                    <img src="../../static/image/head.jpg" class="v-head-img" alt="头像">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="/up">修改密码</el-dropdown-item>
                    <el-dropdown-item command="/login" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

        </div>
        </div>
</template>
<script>
    import bus from './bus';
    export default{
        data() {
            return{
                collapse: true
            }
        },
        methods:{
            // 侧边栏折叠
            collapseChage(){
                this.collapse = !this.collapse;
                bus.$emit('collapse', this.collapse);
            },
            handleCommand(command){
                this.$message.success('退出登录成功！');
                this.$router.push(command);
            }
        },
        mounted(){
            if(document.body.clientWidth < 1500){
                this.collapseChage();
            }
        }
    }
</script>
<style scoped>
    .header-warp{
        display:flex;
        justify-content: flex-start;
        color:#fff;
        font-size: 22px;
        height: 70px;
    }
    .header-warp .logo{
        display: flex;
        align-items: center;
        height: 70px;
    }
    .header-warp .collapse-btn{
        display: flex;
        align-items: center;
        width: 40px;
        height: 70px;
        cursor: pointer;
    }
    .header-warp .header-behind{
        display:flex;
        justify-content: flex-end;
        flex:1;
        height: 70px;
        width: 80px;
    }
    .header-behind > p{
        font-size: 16px;
        display:inline-flex;
        align-items: center;
        padding-left: 16px;
    }
    .v-head-img{
        display: block;
        border-radius: 50%;
        width: 60px;
        height: 60px;
    }
    .el-dropdown{
        display:flex;
        align-items: center;
        color: #fff;
        font-size:20px;
    }
</style>
